<!--个人信息-->
<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">个人信息</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!index_home">首页</a>
          <a><cite>个人信息</cite></a>
        </span>
    </div>
    <div class="layui-card-body">

        <form id="detail-form" lay-filter="detail-form" class="layui-form" wid100>
            <input name="id" type="hidden"/>

            <div class="layui-form-item">
                <img id="avatarImg" th:src="@{/global/img/user_head.png}" src="../../../static/global/img/user_head.png" class="layui-admin-avatar">
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-middle">
                    <input id="avatarPath" name="avatar" placeholder="头像" type="text" class="layui-input" maxlength="20" readonly="readonly"/>
                </div>
                <div class="layui-input-middle">
                    <imput id="avatar" class="layui-btn icon-btn"><i class="layui-icon">&#xe67c;</i>上传头像</imput>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-middle">
                    <input name="username" placeholder="请输入账号" type="text" class="layui-input" maxlength="20"
                           lay-verify="required" required readonly="readonly"/>
                </div>
                <div class="layui-form-mid layui-word-aux">不可修改。用于后台登入名</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名<span style="color: red">*</span></label>
                <div class="layui-input-middle">
                    <input name="nickName" placeholder="请输入用户名" type="text" class="layui-input" maxlength="20"
                           lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">真实姓名</label>
                <div class="layui-input-middle">
                    <input name="realName" placeholder="请输入用户名" type="text" class="layui-input" maxlength="20"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属公司</label>
                <div class="layui-input-middle">
                    <input name="companyName" type="text" class="layui-input" readonly="readonly"/>
                </div>
                <div class="layui-form-mid layui-word-aux">不可修改。如需修改，请进入用户管理-修改</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属部门</label>
                <div class="layui-input-middle">
                    <input name="officeName" type="text" class="layui-input" readonly="readonly"/>
                </div>
                <div class="layui-form-mid layui-word-aux">不可修改。如需修改，请进入用户管理-修改</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-middle">
                    <input type="radio" name="sex" value="男" title="男" checked/>
                    <input type="radio" name="sex" value="女" title="女"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号<span style="color: red">*</span></label>
                <div class="layui-input-middle">
                    <input name="phone" placeholder="请输入手机号" type="text" class="layui-input" lay-verify="required|phone"
                           required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-middle">
                    <input name="email" placeholder="请输入邮箱" type="email" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-filter="detail-form-submit" lay-submit>确认修改</button>
                    <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                </div>
            </div>
        </form>
    </div>
</div>

<script th:inline="javascript">
    layui.use(['layer', 'form', 'upload', 'jquery'], function () {
        const $ = layui.jquery;
        const layer = layui.layer;
        const form = layui.form;
        const upload = layui.upload;

        //执行实例
        form.render('radio');

        const user = [[${user}]];
        if (user) {
            form.val('detail-form', user);
        }

        upload.render({
            elem: '#avatar',
            url: basePath + 'system/user/avatar',
            done: function (res) {
                $("#avatarPath").val(res.resData);
                const html = "<img style='height: 200px;width: 200px;' src='" + basePath + res.resData + "'>";
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    shade: [0.001, '#393D49'],
                    area: '200px',
                    skin: 'layui-layer-nobg', //沒有背景色
                    shadeClose: true,
                    content: html
                });

            }, error: function () {
                layer.msg('请求异常', {icon: 2});
            }
        });

        // 表单提交事件
        const url = basePath + 'system/user/detail';
        form.on('submit(detail-form-submit)', function (data) {
            layer.load(2);
            $.post(url, data.field, function (data) {
                layer.closeAll('loading');
                if (data.success) {
                    layer.msg(data.msg, {icon: 1});
                } else {
                    layer.msg(data.msg, {icon: 2});
                }
            });
            return false;
        });
    })
    ;
</script>

